.uni-sidebar {
    position: fixed;

    border: 1px solid rgb(var(--border-color));
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: var(--box-shadow-lg);
    top: 72px;
    bottom: 12px;
    z-index: 20;

    background-color: rgb(var(--bg-color-secondary));
    color: rgb(var(--text-color));

    transition: all 0.15s;

    &-left {
        left: 12px;
        transform: translateX(calc(-100% - 12px));
        width: 180px;
    }

    &-right {
        min-width: 280px;
        max-width: 400px;
        right: 12px;
        transform: translateX(calc(100% + 12px));
    }

    &&-open {
        transform: translateX(0);
    }

    &-container {
        overflow-y: auto;
        display: grid;
        grid-template-rows: auto;
        // grid-template-rows: auto 1fr auto;

        box-sizing: border-box;
        width: 100%;
        height: 0;
        min-height: 100%;
        margin: auto;
        overflow: hidden;

        background-color: rgb(var(--bg-color-secondary));

        scrollbar-color: rgba(var(--scrollbar-color), 0.7) transparent;
        scrollbar-gutter: auto;
        scrollbar-width: thin;
    }

    &-header {
        position: sticky;
        top: 0;

        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 44px;
        padding: var(--padding-xl) var(--padding-xl) 0;

        font-size: var(--font-size-lg);
        font-weight: 500;

        background: rgb(var(--bg-color-secondary));
        box-sizing: border-box;
        z-index: 10;

        &-close {
            cursor: pointer;
            color: rgb(var(--text-color-secondary));
        }
    }

    &-body {
        padding: var(--padding-sm);
        box-sizing: border-box;

        & > div {
            height: 100%;
        }
    }

    &-footer {
        position: sticky;
        bottom: 0;
        padding: var(--padding-xl);
        background: rgb(var(--bg-color-secondary));
        box-sizing: border-box;
    }
}
